<template>
    <div class="wrapper">
        <div style="margin: 200px auto; background-color: #fff; width: 350px; padding: 20px; border-radius: 10px">
            <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>登 录</b></div>
            <el-form :model="user" :rules="rules" ref="userForm">
                <el-form-item prop="username">
                    <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user"
                        v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password
                        v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item style="margin: 20px 0; text-align: center">
                    <el-button type="primary" size="medium" autocomplete="off" @click="login">登录</el-button>
                    <el-button type="warning" size="medium" autocomplete="off"
                        @click="$router.push('/register')">注册</el-button>
                    <el-button type="primary" size="medium" @click="getQrCode">微信登录</el-button>
                </el-form-item>
                
            </el-form>
        </div>
        <!-- 微信登录二维码弹框 -->
        <el-dialog :visible.sync="showQrCodeDialog" title="微信扫码登录" width="350px" :before-close="handleClose">
            <img :src="qrCodeUrl" v-if="showQrCode"
                style="width: 300px; height: 300px; margin: 0 auto; display: block;">
            <span v-else>加载中...</span>
        </el-dialog>
    </div>
</template>

<script>
    import load from '@/utils/loading.js';
import qs from "qs";
    export default {
        name: "Login",
        data() {
            return {
                user: {
                    username: "admin",
                    password: "123"
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                },
                qrCodeUrl: '',
                showQrCode: false,
                showQrCodeDialog: false,
                sceneStr: '',
                intervalId: null
            }
        },
        methods: {
            login() {
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {  // 表单校验合法
                        //发送请求
                        this.$Loading("登录中...")
                        this.request.post("/login", this.user).then(res => {
                            this.$Loading.close()
                            if (res.code !== 200) {
                                this.$message.error("用户名或密码错误")
                            } else {
                                localStorage.setItem("user",JSON.stringify(res.data.user))
                                localStorage.setItem("token",JSON.stringify(res.data.token))
                                localStorage.setItem("menus",JSON.stringify(res.data.menus))
                                this.$router.replace("/home")
                                this.$message.success("登录成功")
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            getQrCode() {
                this.request.get('/qrCodeFirstLogin/getQrCode').then(data => {
                    if (data.code == 200) {
                        this.sceneStr = data.data.sceneStr;
                        this.qrCodeUrl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=" + data.data.ticket;
                        this.showQrCode = true;
                        this.showQrCodeDialog = true;
                        console.log("scenstr: "+this.sceneStr+
                            "   qrCodeurl: "+this.qrCodeUrl
                        )
                        this.intervalId = setInterval(this.getOpenId, 5000);
                        
                    } else {
                        // this.$message.error(data.msg);
                        console.log(data.msg);
                    }
                });
            },
            getOpenId() {
             console.log("getopenid 中的eventkey:  " +this.sceneStr);
                this.request.get("/qrCodeFirstLogin/getOpenId?eventKey=" + this.sceneStr).then(res => {
                    console.log("========getOpenId==========");
                    console.log(res)
                    if (res.code == 200) {
                        clearInterval(this.intervalId);
                        localStorage.setItem("user", JSON.stringify(res.data.user))
                        localStorage.setItem("token", JSON.stringify(res.data.token))
                        localStorage.setItem("menus", JSON.stringify(res.data.menus))
                        this.$router.replace("/home")
                        this.$message.success("登录成功");
                        // 此处添加登录成功后的处理逻辑，例如跳转到首页或保存用户信息
                        this.showQrCodeDialog = false;
                    }else{
                        // this.$message.error(data.msg);
                        console.log(res.msg);
                        
                    }
                })
            },
            handleClose() {
                clearInterval(this.intervalId);
                this.showQrCodeDialog = false;
            }
        }
    }
</script>

<style>
    .wrapper {
        height: 100vh;
        background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);
        overflow: hidden;
    }
</style>
